<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!--移动端的兼容-->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>注册账户</title>
    <!--公共部分的样式-->
    <link rel="stylesheet" type="text/css" href="../common_css/common.css" />
    <link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
    <!--本页的样式-->
    <!--<link rel="stylesheet" type="text/css" href="css/registered_account.css" />-->
    <style type="text/css">
    @media only screen and (min-width: 320px) {
        html,
        body {
            font-size: 14px;
        }
    }
    
    @media only screen and (max-width: 320px),
    only screen and (max-device-width:320px) {
        html,
        body {
            font-size: 14px;
        }
    }
    /*最外层的div*/
    
    #account_statistic_main {
        width: 100%;
        min-width: 320px;
        height: 100%;
        background-color: #F7F7F7;
        overflow: auto;
    }
    /*头部*/
    
    #account_statistic_header {
        width: 100%;
        height: 50px;
        background-color: #21538D;
        text-align: center;
        line-height: 50px;
        color: white;
        font-size: 1.38rem;
    }
    /*头部的左箭头*/
    
    #account_statistic_header span {
        float: left;
        font-size: 25px;
    }
    
    #account_statistic_header font {
        font-size: 1.38rem;
        margin-left: -20px;
    }
    /*身体*/
    
    #account_statistic_body {
        width: 100%;
        background-color: #F7F7F7;
        margin-top: 0.62rem;
    }
    /*主要内容的头像*/
    
    .forget_password_content {
        width: 100%;
        height: 13rem;
        /*border: 1px solid red;*/
        position: relative;
    }
    /*图片*/
    
    .forget_password_content_img {
        width: 6rem;
        height: 6rem;
        /*border: 1px solid red;*/
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
    }
    
    .forget_password_content_img img {
        width: 6rem;
        height: 6rem;
    }
    /*请输入手机号的内容*/
    
    .forget_password_content_please {
        width: 100%;
        height: 3rem;
        /*border: 1px solid blue;*/
    }
    
    .forget_password_content_please div {
        width: 80%;
        height: 2.8rem;
        border: 1px solid #F6A623;
        border-radius: 5px;
        margin: auto;
        background-color: #FFFFFF;
        display: -webkit-box;
    }
    /*手机号输入的各种状态*/
    
    .forget_password_content_please_2 {
        width: 100%;
        height: 24px;
        /*border: 1px solid blue;*/
        /*margin-top: 10px;*/
    }
    
    .forget_password_content_please_2 div {
        width: 80%;
        height: 24px;
        /*border: 1px solid red;*/
        margin: auto;
        line-height: 24px;
        font-size: 12px;
        padding-left: 10px;
        display: -webkit-box;
    }
    
    .forget_password_content_please div span {
        display: inline-block;
        width: 40px;
        height: 30px;
        border: none;
        /*border: 1px solid blue;*/
        /*margin: 8px 0px 0px 5px;*/
        display: -webkit-box;
        -webkit-box-orient: horizontal;
    }
    
    .forget_password_content_please div span img {
        width: 24px;
        height: 24px;
        vertical-align: middle;
        margin: 5px 10px 0px 5px;
    }
    
    #forgetpassword_input,
    #forgetpassword_input_1 {
        display: -webkit-box;
        -webkit-box-flex: 1;
        height: 2.6rem;
        line-height: 2.6rem;
        border-radius: 5px;
        border: none;
        outline: none;
        font-size: 14px;
    }
    /*请输入验证码*/
    
    .forget_password_content_please1 {
        width: 100%;
        height: 3rem;
        border: 1px solid blue;
    }
    
    #please1_center {
        width: 70%;
        height: 3rem;
        /*border: 1px solid red;*/
        margin: auto;
    }
    
    .content_please1_input {
        width: 50%;
        height: 3rem;
        border-radius: 5px;
        border: 1px solid #F6A623;
        float: left;
        color: #6B6B6B;
    }
    
    .content_please1_input input {
        width: 100%;
        height: 2.8rem;
        line-height: 2.8rem;
        font-size: 1rem;
        border-radius: 5px;
        border: none;
        outline: none;
        /*border: 1px solid red;*/
        padding-left: 10px;
    }
    
    .content_please1_set {
        width: 50%;
        height: 3rem;
        /*border: 1px solid green;*/
        float: left;
    }
    
    #get_code {
        width: 90%;
        height: 35px;
        float: right;
        font-size: 0.875em;
        margin: 3px 0px 0px 0px;
        line-height: 35px;
        border-radius: 5px;
        background-color: #F6A623;
        color: white;
        text-align: center;
        outline: none;
        border: none;
    }
    
    .content_please1_set div {
        width: 90%;
        height: 35px;
        float: right;
        font-size: 0.875em;
        margin: 6px 0px 0px 0px;
        line-height: 35px;
        border-radius: 5px;
        background-color: #F6A623;
        color: white;
        text-align: center;
    }
    /*确认*/
    
    .forget_password_content_confirm {
        width: 100%;
        height: 2.5rem;
        /*border: 1px solid blue;*/
        margin-top: 2.5rem;
    }
    
    .forget_password_content_confirm div {
        width: 40%;
        height: 2.5rem;
        margin: auto;
        line-height: 2.5rem;
        text-align: center;
        color: white;
        /*border: 1px solid red;*/
        background-color: #F6A623;
        border-radius: 5px;
    }
    /*注册即视为同意 秒星APP用户协议*/
    
    .register_agree {
        width: 100%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-family: "PingFangSC-Regular";
        font-size: 14px;
        color: #323232;
        letter-spacing: 0.3px;
        position: absolute;
        bottom:2rem;
    }
    .istrue {
        color: green;
        border-color: green !important;
    }
    .isfalse {
        color: red;
        border-color: red !important;
    }
    .dis{
    	display: none;
    }
    
    .gray{
        background: gray;
    }
    .yellor{
    	background: #F6A623 !important;
    }
    </style>
</head>

<body>
    <!--总div-->
    <div id="account_statistic_main">
        <!---头部-->
        <div id="account_statistic_header">
            <span class="iconfont icon-back icon_fanhui"></span>
            <font>注册账户</font>
        </div>
        <!--身体-->
        <div id="account_statistic_body">
            <!--居中的头像-->
            <div class="forget_password_content">
                <div class="forget_password_content_img">
                    <img src="../commonimg/seelogo.png" />
                </div>
            </div>
            <!--请输入手机号-->
            <div class="forget_password_content_please">
                <div v-bind:class="{istrue:isactive_pho, isfalse:notactive_pho}"> <span style="margin-top: 2px;"><img src="../commonimg/用户昵称@2x.png"/></span>
                    <input type="text" id="forgetpassword_input" placeholder="请输入手机号码" v-on:blur="judgment_phone" v-model="phonenumber" />
               <span :class="{dis:is_disab}"><img style="width:20px; height: 20px; margin:10px 0px 0px 10px" :src="imagesrc" /></span>
                </div>
            </div>
            <div class="forget_password_content_please_2">
                <div id="phone_num_error" v-bind:class="{istrue:isactive_pho, isfalse:notactive_pho}" v-html="falsephone"> </div>
            </div>
            <div class="forget_password_content_please">
                <div v-bind:class="{istrue:isactive_pas, isfalse:notactive_pas}"> <span><img src="../commonimg/密码@2x.png"/></span>
                    <input type="text" id="forgetpassword_input_1" placeholder="输入6-20个字母、数字、下划线" v-on:keypress="judgment_password" v-model="password" />
                </div>
            </div>
            <div class="forget_password_content_please_2">
                <div id="phone_num_error" v-bind:class="{istrue:isactive_pas, isfalse:notactive_pas}" v-html="falsepassword"> </div>
            </div>
            <!--请输入验证码-->
            <div class="forget_password_content_please1">
                <div id="please1_center">
                    <div class="content_please1_input">
                        <input id="please_center_code" type="text" placeholder="请输入验证码" />
                    </div>
                    <div class="content_please1_set">
                        <input type="button" id="get_code" value="获取验证码" v-bind:value="yanzhengma" v-bind:disabled="dis" v-on:click="getyan()" v-bind:style="{background:bc_color}" :class="isactive_pas_1==true&&isactive_pho_1==true ? 'yellor' : 'gray'"/>
                    </div>

                </div>
            </div>
            <!--请确认-->
            <div class="forget_password_content_confirm">
                <div id="register_sure">确认</div>
            </div>
            <!--注册即视为同意 秒星APP用户协议-->
            <div class="register_agree">
                注册即视为同意 见到APP用户协议
            </div>
        </div>
    </div>
    <script src="../common_js/jquery-1.11.0.min.js"></script>
    <!--公共的点击预约的加号的按钮的跳转以及点击每页左上角的跳转-->
    <script src="../common_js/onclick_pop_view.js"></script>
    <script src="../common_js/vue.js"></script>
    <script type="text/javascript">
    //		veu写的点击获取验证码时候的判断
    var myvue = new Vue({
        el: "body",
        data: {
            yanzhengma: "获取验证码",
            dis: true,
            phonenumber: "",
            password: "",
            falsephone: "",
            isactive_pho: false,
            notactive_pho: false,
            isactive_pas: false,
             isactive_pas_1: false,
             isactive_pho_1: false,
            notactive_pas: false,
            falsepassword: '',
            bc_color: "gray",
            imagesrc:"",
            is_disab:true,
        },
        methods: {
            getyan: function() {
                //vue里边的这个this指向vue
                //console.log(this);
                console.log(1)
                var timess = 60;
                //在外边定义一个tthis,用来指向vue的这个this
                var tthis = this;
                var ting = setInterval(function() {
                    if (timess == -1) {
                        clearTimeout(ting);
                        tthis.yanzhengma = "获取验证码";
                        tthis.dis = false;
                         tthis.isactive_pho_1 = true;
                        timess = 60;
                    } else {
                        //此时的this指向window
                        //			           	console.log(this)
                        tthis.yanzhengma = "重新获取" + timess + "";
                        tthis.dis = true;
                         tthis.isactive_pho_1= false;
                        timess--;
                    }
                }, 1000);

            },
            judgment_password: function() {
            	var al = this;
                var registPassword = al.password;
                var passw = /^(\w){6,20}$/g;
                if (passw.test(registPassword) != true) {
                    al.notactive_pas = true;
                    al.falsepassword = "	<p>请输入正确的格式</p>";
                    al.dis = true;
                    al.bc_color = "gray",
                       al.isactive_pas = false;
                        al.isactive_pas_1= false;
                } else {
                    al.notactive_pas = false;
                    al.isactive_pas = true;
                     al.isactive_pas_1 = true;
                    console.log(al.isactive_pas);
                    al.falsepassword = "<p>输入正确</p>";
                    al.dis = false;
                    // this.bc_color = "#F6A623";
                }
            },
            judgment_phone: function() {
            	var that = this
                var registPhone = that.phonenumber;
                var phones = /^1[3|4|5|7|8][0-9]{9}$/g;
                if (phones.test(registPhone) != true) {
                    that.notactive_pho = true;
                    that.falsephone = "	<p>请输入正确的格式</p>";
                    that.dis = true;
                    that.bc_color = "gray",
                    that.isactive_pho = false;
                     that.isactive_pho_1 = false;
                     
                     that.is_disab =false;
                     that.imagesrc = "img/baocuo.png";
                } else {
                    that.notactive_pho = false;
                    that.isactive_pho = true;
                     that.isactive_pho_1 = true;
                    console.log(that.isactive_pho);
                    that.falsephone = "	<p>输入正确</p>";
                    that.dis = false;
                     that.imagesrc = "img/微信图片_20170518182403.png";
                    // this.bc_color = "#F6A623"
                }


            },
            common: function() {
                var that = this
                if (that.falsepassword == "<p>输入正确</p>" && that.falsephone == "<p>输入正确</p>") {
                    that.dis = true;
                    that.bc_color = "#F6A623";
                } else {
                    that.dis = false;
                    that.bc_color = "gray";
                }
            }

        }
    });

    //			发送验证码的接口
    $("#get_code").on("click", function() {
        var user_phonenum_val = $("#forgetpassword_input").val();
        $.ajax({
            type: "GET",
            url: "http://119.23.224.92/jiandao/user/sendPass",
            async: true,
            data: {
                "mobile": user_phonenum_val
            },
            success: function(result) {
                console.log(result);
                console.log(JSON.parse(result));
//              解析json
                var analyse_json = JSON.parse(result);
                console.log(analyse_json.success);
                if (analyse_json.success=="8888") {
                	alert("验证码发送成功，请注意查收");
                } else{
                	alert("验证码发送失败，请在60秒后重现获取");
                }
            }
        });
    });
    //			点击确认时的跳转
    $("#register_sure").on("click", function(e) {
        var user_password = $("#forgetpassword_input_1").val();
        var user_phonenum_val = $("#forgetpassword_input").val();
        var user_code = $("#please_center_code").val();
        $.ajax({
            type: "POST",
            url: "http://119.23.224.92/jiandao/user/regist",
            async: true,
            data: {
                "user_pwd": user_password,
                "user_tel": user_phonenum_val,
                "no": user_code
            },
            success: function(data) {
                console.log(data);
               console.log(JSON.parse(data));
               var jiexi_json = JSON.parse(data);
               console.log(jiexi_json.success);
               if (jiexi_json.success=="8888") {
               	  alert("注册成功");
               	   //   	在没有进行任何判断的时候进行的跳转
               	    location.href = "../login/login.html";
               };
               if (jiexi_json.success=="1025") {
                	alert("验证码已经过期或失效");
                };
                if (jiexi_json.success=="1001") {
                	alert("你还有未填项哦！");
                };
               if (jiexi_json.success=="1026") {
               	 console.log("该手机号已经注册");
               	 alert("该手机号已经注册，请前往登录页面");
               	  location.href = "../login/login.html";
               };
              
            },
            error: function(err) {
                console.log(e.target);
                console.log("错误");
                console.log(err);
                console.log(err.status);
            }
        });
       
    });
    </script>
</body>

</html>
